<template>
  <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
    <div class="infoModal">人员添加</div>

    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" class="formVideoModel">
      <a-form-model-item label="所在区县" ref="county" prop="county">
        <CitySelect v-model="form.county" @update="validateField"   :fromCityList.sync="cityList" ></CitySelect>
      </a-form-model-item>
      <a-form-model-item label="关联合同名称" ref="contractName" prop="contractName">
         <ContractSelect v-model="form.contractName"  @update="validateFieldContractName"  v-bind:fromCityList="form.contractName"></ContractSelect>
      </a-form-model-item>
      <a-form-model-item label="人员姓名" ref="staffName" prop="staffName">
        <a-input v-model="form.staffName" />
      </a-form-model-item>
      <a-form-model-item label="职位" ref="position" prop="position">
        <a-input v-model="form.position" />
      </a-form-model-item>
      <a-form-model-item label="身份证号码" ref="idCard" prop="idCard">
        <a-input v-model="form.idCard	" />
      </a-form-model-item>
      <a-form-model-item label="电话号码" ref="mobile" prop="mobile">
        <a-input v-model="form.mobile" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 20, offset: 9 }">
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
        <a-button style="margin-left: 10px;" @click="cancelEvent">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { adddwStaff } from '@/api/video'
import CitySelect from '@/views/videoManage/util/citySelect'
import ContractSelect from '@/views/videoManage/util/contractSelect'
export default {
  components:{CitySelect,ContractSelect},
  data() {
    return {
      cityList:[],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {county:'',contractName:""},
      rules: {
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        county: [{ required: true, message: '请选择区域', trigger: 'change' }],
        idCard: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        staffName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        position: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) },
        ],
      },
    }
  },
  methods: {
     //手动再验证 区县
     validateField(e) {
      this.cityList =e
      this.form.county =e
      this.$refs.ruleForm.validateField('county');
     },
     validateFieldContractName(e){
      // this.contractName =e
      this.form.contractName =e
      this.$refs.ruleForm.validateField('contractName');
     },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
           let form = JSON.parse(JSON.stringify(this.form)) 
           form.county = form.county.toString()
          adddwStaff(form).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '添加成功!',
                  duration: 3,
                })
                this.$emit('successEvent')
              }
            }
          })
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
  },
}
</script>
